<template>
    <div class="case">
      <div class="case-main">
        <div class="case-content">
          <div class="title">
            <span :class="details.clazzName?'back':''" @click="$router.go(-1)">案例分类{{ details?' > ':'' }}</span>
            <span class="type" v-if="details.clazzName">  {{ details.clazzName }}</span>
            
          </div>
          <div class="content">
            <div class="title">{{ details.title }}</div>
            <div class="time">发布日期：{{  details.createTime }}</div>
            <div class="ql-editor" v-html="details.content"></div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    components: {
    },
    data(){
      return{
        type:'',
        routeParams:{},
        details:{}
      }
    },
    methods:{
      getDetails(){
        this.$apis.baseData.selectInfo({id:this.routeParams.id}).then(res=>{
          this.details=res.data
        })
      }
    },
    mounted(){
      //console.log(this.$route)
      // this.details={}
      // this.routeParams=this.$route.query
      // this.getDetails()
    },
    activated(){
      this.details={}
      this.routeParams=this.$route.query
      this.getDetails()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .case{
    display: flex;
    flex-direction: column;
  }
  .case-main{
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }
  .case-content{
    margin-top: 10px;
    width: $public-width;
    max-width: 100%;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title{
      width: 100%;
      padding: 10px;
      font-size: 15px;
      font-weight: bold;
      display: flex;
    }
    
    .back{
      cursor: pointer;
      color: $color-main-primary;
    }
    .type{
      margin-left:4px;
    }
    
  }
  .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    .title{
      display: inline-block;
      width: 100%;
      font-size: 20px;
      font-weight: bold;
      padding: 10px;
    }
    .time{
      width: 100%;
      font-size: 14px;
      color: #8a8a8a;
      padding: 0 10px;
    }
  }
  .ql-editor{
    user-select:text;
    width: 100%;
    ::v-deep img{
      max-width: 100%;
    }
  }
  </style>
  